import { CheckboxGroup, Checkbox } from "@design-system/headless";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

<Meta
  title="Design-system/Headless/CheckboxGroup"
  component={CheckboxGroup}
  args={{
    label: "Checkbox group",
    children: (
      <>
        <Checkbox value="option 1">Option 1</Checkbox>
        <Checkbox value="option 2">Option 2</Checkbox>
      </>
    ),
  }}
/>

export const Template = (args) => <CheckboxGroup {...args} />;

# CheckboxGroup

A Checkbox group is a group of radio buttons that are related to each other in some way. For example, they may all represent a single question on a survey. The Checkbox group component is a headless component that provides the logic and accessibility implementation for a group of radio buttons.

Note: The `<input="checkbox" />` is visually hidden. Use the `<span data-icon />` to render a custom looking checkbox.

<Canvas>
  <Story name="CheckboxGroup">{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="CheckboxGroup" of={CheckboxGroup} />
